<template>
<view :class="['page',{'iphoneX':isIphoneX}]"> 
	 
	<view v-if="isLogin" class="body">
		<template >
			<template v-if="loadingState.default">
				<c-loading :loadingState="loadingState"></c-loading>
			</template>
			
			<template v-else>
				<template v-if="list.length>0">				
					<view class="msg-wrap">
						<navigator :url="'/package_customer/customer-window/customer-window?chat_id='+item.gid+'&pro_name='+item.name" open-type="navigate" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<!-- <view class="icon">
								<image src="@/static/images/image.png" mode="widthFix"></image>
								<view v-if="item.unread>0" class="num">{{item.unread>100?'99+':item.unread}}</view>
							</view> -->
							<view class="group-avator"> 
								<view :class="['avator',{'avatarItem--1':item.user_avatar.length==1},{'avatarItem--2':item.user_avatar.length>1},{'avatarItem--3':item.user_avatar.length>4}] " v-for="(subItem,subIndex) in item.user_avatar" :key="subIndex" >{{subItem.username|substringUsername(subItem.username)}}</view> 							
								<view v-if="item.unread>0" class="num">{{item.unread>100?'99+':item.unread}}</view>
							</view>
							<view class="info">
								<view class="title-bar">
									<view class="title split">{{item.name}}</view>
									<view class="time">{{item.last_msg_time}}</view>
								</view>	
								<view v-if="item.last_msg" class="new-msg">
									<view v-if="item.last_msg_username!=userInfo.username" class="user-name">{{item.last_msg_username}}:</view>
									<view class="msg split">{{item.last_msg}}</view>
								</view>
							</view>							
						</navigator>
					</view>
					<c-loading :loadingState="loadingState"></c-loading>
				</template>
				<c-empty v-else><view slot="text">没有相关信息</view></c-empty>		
			</template>
		</template> 
	</view> 
	
	<c-nav-project :switchTab="2"></c-nav-project>
</view>
</template>

<script>    
export default{
	name:'demo',
	data(){
		return{
			isLogin:false,
			isIphoneX:getApp().globalData.isIphoneX,
			userInfo:uni.getStorageSync('userInfo'),
			isEmpty:false,
			isSwitchTab:2,
			loadingState:{		 
				default:true,
				loading:false,
				completed:false
			},
			list:[]
		}
	},
	filters: {
		substringUsername(val) {
			if (val) return val.substring(val.length - 2);
		},
	},
	onShow() {
		
	},
	async onLoad() {
		this.isLogin = await this.$loginState('check');
		if (this.isLogin) {
			this.chatList();			
		}
		
	},
	methods:{
		async chatList(){
			let res=await this.$api.user_api.chatList();   
			  console.log(res)
			if(res.data.code==200){
				this.loadingState.default=false;
				let date=new Date();
				let today=date.getFullYear()+'-'+((date.getMonth()+1)<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'-'+((date.getDate())<10?'0'+(date.getDate()):date.getDate());
				res.data.data.forEach(item=>{
					item.last_msg_time=item.last_msg_time.split(' ')[0]==today?item.last_msg_time.split(' ')[1]:item.last_msg_time; 
				}) 
				this.list=this.list.concat(res.data.data)
			}
		}
	},
	computed: {
		// 监听新消息
		new_msg() {
			return this.$store.state.socket_msg_data
		},
		
		// 监听消息已读
		msg_read(){
			return this.$store.state.chat_msg_read
		}
		
		
		
		
	
	},
	watch: {
		new_msg(newer, older) {   
			if (newer.type == 'msg') {
				this.list.forEach(item=>{
					if(item.gid==newer.gid){
						item.last_msg=newer.msg;
						item.last_msg_username=newer.name;
						item.unread=Number(item.unread)+1;
						let date=new Date();
						let today=date.getFullYear()+'-'+((date.getMonth()+1)<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'-'+((date.getDate())<10?'0'+(date.getDate()):date.getDate());
						item.last_msg_time=newer.time.split(' ')[0]==today?newer.time.split(' ')[1]:newer.time; 
					}
				}) 
				let index=this.list.findIndex(item=>{
					return item.gid===newer.gid
				})
				this.list.unshift(this.list.splice(index, 1)[0])
			} 
		},
		
		msg_read(newer,older){
			if(newer!=older){
				this.list=[];
				this.chatList();
			}			
		}
	},
	components:{
		 
	}
}
</script>

<style lang="less">
.msg-wrap{
	padding:20rpx 0;	
	.item{
		display: flex;  
		align-items: center;
		padding: 0 0 0 20rpx;		
		background: #fff;
		.icon{
			position: relative;
			width:90rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
			image{
				width:100%;
				border-radius: 15rpx;
			}
			
		}
		.group-avator{
			position: relative;
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
			background: #f5f5f5;
			border-radius: 10rpx;	 
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;
			flex-wrap: wrap-reverse;
			flex-shrink: 0;
			padding: 2rpx; 
			 .num{
				position: absolute;
				left:80rpx;
				top:-15rpx;
				min-width:7px;
				height: 15px;
				line-height: 15px;
				padding:0 4px; 
				text-align: center;
				background: #f00;
				border-radius: 38rpx;
				color:#fff;
				font-size: 12px;
			 }
			.avator{	
				display: flex;
				align-items: center;
				justify-content: center; 
				flex-shrink: 0;
				height: 26rpx;
				margin: 2rpx;				
				background: #09f;
				border-radius: 5rpx;
				color:#fff
			} 
			.avatarItem--1 {
				width: 98%;
				height: 98%;
				font-size: 28rpx;
			}
			.avatarItem--2 {
				width: 47%;
				height: 47%;
				margin: 1%;
				font-size: 18rpx;
			}
			.avatarItem--3 {
				width: 31%;
				height: 30%;
				margin: 1%;
				font-size: 14rpx;
			}
		}
		.info{
			flex-grow: 2;
			max-width: 85%;
			padding: 20rpx 20rpx 20rpx 0;
			height: 90rpx;
			border-bottom: 1rpx solid rgba(238,238,238,.5);
			.title-bar{
				display: flex;
				justify-content: space-between;
				align-items: center; 
				.title{	
					max-width: 80%;
					font-size: 32rpx;
				}
				.time{
					flex-shrink: 0;
					font-size: 24rpx;
					color:#999;
				}
			}
			.new-msg{ 
				display: flex;
				font-size: 28rpx;
				color:#999;
				.msg{
					flex-grow: 2;
					max-width: 80%;
				}
			}
		}
		
	}
}	
</style>
